<ion-content>
  <button ion-button icon-only (click)="diss()">
    <ion-icon name="arrow-back" color="#ffffff" style="padding-right: 2px;margin-top: 1px; font-size: 26px;"></ion-icon>
  </button>
  <button *ngIf="showZank" ion-button icon-only (click)="show=!show" style="position:absolute;top:0px;right:15px;">
    <img src="assets/img/goumai@2x.png" alt="">
  </button>
  <ion-slides class="slide1" loop autoplay="1500">
    <ion-slide>
      <div>
        <img src="http://www.mengfeisi.com.cn/Uploads/nail_album/2017-03-07/1_328.jpg" style="width: 100%;" alt="">
      </div>
    </ion-slide>
    <ion-slide>
      <div>
        <img src="http://www.mengfeisi.com.cn/Uploads/nail_album/2017-03-07/2_328.jpg" style="width: 100%;" alt="">
      </div>
    </ion-slide>
    <ion-slide>
      <div>
        <img src="http://www.mengfeisi.com.cn/Uploads/nail_album/2017-03-07/3_328.jpg" style="width: 100%;" alt="">
      </div>
    </ion-slide>
  </ion-slides>
  <div class="cont1">
    <div class="text" (click)="obout1(1)" *ngIf="oboaut1==0">
      <!-- <div class="text" *ngIf="oboaut1==0"> -->
      <img src="assets/img/ios/zan-gray@2x.png" alt="">
      <span>点赞 {{NailDetailsData.zank_count}}</span>
      <!-- <ion-list no-lines>
        <ion-item>
          <ion-label style="font-size: 12px !important;">美店付款点赞后，此款式将进入店铺成为服务款式</ion-label>
          <ion-select [(ngModel)]="version" (ngModelChange)="version=$event; changeVersion(1)" cancelText="取消" okText="确认">
            <ion-option value="1">1天 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ￥ 1.00</ion-option>
            <ion-option value="7">7天 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ￥ 7.00</ion-option>
            <ion-option value="15">15天 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;￥ 15.00</ion-option>
            <ion-option value="30">30天 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;￥ 30.00</ion-option>
          </ion-select>
        </ion-item>
      </ion-list> -->
    </div>
    <div class="text" (click)="obout1(0)" *ngIf="oboaut1== 1">
      <img src="assets/img/ios/zan-red@2x.png" alt="">
      <span>点赞 {{NailDetailsData.zank_count}}</span>
    </div>

    <div class="text" (click)="obout2(1)" *ngIf="oboaut2==0">
      <img src="assets/img/ios/shoucang-gray@2x.png" alt="">
      <span>收藏 {{NailDetailsData.collect_count}}</span>
    </div>
    <div class="text" (click)="obout2(0)" *ngIf="oboaut2== 1">
      <img src="assets/img/ios/shoucang-red@2x.png" alt="">
      <span>收藏 {{NailDetailsData.collect_count}}</span>
    </div>
  </div>

  <div class="cont3">
    <ion-list>
      <ion-item>
        <ion-avatar item-start>
          <img class="img1" src="{{picture}}{{NailDetailsData.artist_avator}}" (click)="GoMages()">
        </ion-avatar>
        <div style="display: inline-flex;width: 90%"><h2 style="width: 90%">{{NailDetailsData.artist_nickname}}</h2>
          <img src="assets/img/chuji@2x.png" *ngIf='artist_level==1' alt="" srcset="" style="max-width: 2.5rem;height: 1.2rem;margin-top: 0.2rem;margin-left: 0.5rem">
          <img src="assets/img/zhongji@2x.png" *ngIf='artist_level==2' alt="" srcset="" style="max-width: 2.5rem;height: 1.2rem;margin-top: 0.2rem;margin-left: 0.5rem">
          <img src="assets/img/gaoji@2x.png" *ngIf='artist_level==3' alt="" srcset="" style="max-width: 2.5rem;height: 1.2rem;margin-top: 0.2rem;margin-left: 0.5rem">
        </div>
        <p style="font-size: 12px;">{{NailDetailsData.artist_focus_num}} 款美图 | {{NailDetailsData.artist_goods_num}} 位粉丝</p>
        <ion-avatar item-right class="btn" (click)="obout(1)" *ngIf="oboaut==0">
          <img class="img2" src="assets/img/ios/guanzhu@2x.png" alt="">关注
        </ion-avatar>
        <ion-avatar item-right class="btn" (click)="obout(0)" *ngIf="oboaut == 1" style="border:#D0D0D0 1px solid;color:#D0D0D0">
          已关注
        </ion-avatar>
      </ion-item>
    </ion-list>
  </div>
  <div class="nailDetail">
    <div class="text1">
      <span>款式详情</span>
    </div>
    <div class="nailName" style="margin-bottom: 0.5rem">
      <div class="text">
        {{nail_info.nail_name}}
      </div>
      <div class="text2">
        <span class=" red" *ngFor="let style of nail_info.type_names, let i = index" style="white-space: nowrap">
          #{{style}}&nbsp;
        </span>
      </div>
    </div>
    <div class="useDetail">
      <div style="float:left;padding-left:2rem;position:relative;">
        <div class="useTime" style="width:15px;height:15px;position:absolute; top: 3px;left:0;">
          <img style="width:100%;;height:100%;" src="assets/img/haoshi@2x.png" alt="">
        </div>
        耗时 :
        <span> {{nail_info.nail_consuming_time}}分钟</span>
      </div>
      <div style="float:left;padding-left:5rem;position:relative;">
        <div class="useTime" style="width:15px;height:15px;position:absolute; top: 3px;left:3rem;">
          <img style="width:100%;;height:100%;" src="assets/img/baochi@2x.png" alt="">
        </div>
        保持 :
        <span> {{nail_info.keep_time}}天</span>
      </div>
    </div>
    <div class="text2">
      <p>使用工具 : {{nail_info.nail_tools}} </p>
      <p>使用材料 : {{nail_info.nail_materials}} </p>
      <p>适用场景 : {{nail_info.applicable_scene}} </p>
      <p>创意理念 : {{nail_info.nail_desc}} </p>
    </div>
  </div>
  <!-- <div class="cont4" style="border-bottom:1px solid #ccc;">
    <div class="text">
      款式详情
    </div>
  </div>
  <div class="nailName">
    <div class="text">
      {{nail_info.nail_name}}
    </div>
    <div class="text2">
      <span class=" red" *ngFor="let style of nail_info.type_names, let i = index">
        #{{style}}&nbsp;
      </span>
    </div>
  </div>

  <div class="countListDetail">
    <ion-list>
      <ion-item>
        <div class="useDetail">
          <div class="text1">
            <p>耗时 : <span>40分钟</span></p>
            <p>保持 : <span>20天</span></p>
          </div>
          <div class="text2">
            <p>使用工具: </p>
            <p>使用材料: </p>
            <p>耗时: 分钟</p>
          </div>
        </div>
      </ion-item>
    </ion-list>
  </div> -->
  <div class="cont5">
    <div class="allShop clearfix" style="position: relative;">
      <div class="btn" style="float:left;">
        合作美店
      </div>
      <div class="browse" style="float:right;line-height: 40px; position: absolute;
    top: 0;
    right: 30px;">
        <button (click)="browseAll()" style="background:transparent;">查看全部
        </button>
        <img src="assets/img/arrow.png" alt="" style="width: 12px;height: 16px;position: absolute;
    top: 12px;
    right: -13px;">
      </div>
    </div>
    <div class="shop"  id='divv'  style="margin-top: 40px;" *ngIf="shopInfoData">

      <ion-scroll scrollX="true" scroll-ys>
        <div class="outContainer">
          <div class="hideScorll">
            <div class="innerContainer">
              <div *ngFor="let imgs of shop_info, let i = index"  fl style="overflow:hidden;">
                <div class="shops" (click)="shopInfo(i,divv)">
                  <div class="img">
                    <img src="{{picture}}{{imgs.shop_logo}}" alt="">
                  </div>
                  <span>{{imgs.shop_name}}</span>
                </div>
              </div>
              <div (click)="browseAll()" fl>
                <div class="shops">
                  <div class="img" style="line-height: 30px;
                      font-size: 40px;
                      color: #ff5d5d;">
                    ...
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </ion-scroll>
    </div>
    <div class="shop" style="margin-top: 40px;" *ngIf="!shopInfoData">
      <h2 text-center>暂无合作美店</h2>
    </div>
  </div>
  <div class="cont6">
    <div class="text">
      <span class="text1">评论( {{comments.length}} )</span>
      <span class="text2" (click)="InputCLI('text','评论','评论',200)">
        <img src="assets/img/ios/pinglun@2x.png" alt="">评论</span>
    </div>
    <div>
      <ion-list>
        <ion-item *ngFor="let com of comments, let i = index">
          <div class="tflex">
            <div>
              <ion-avatar item-start>
                <img src="{{picture}}{{com.commenter_avator}}" style="width: 45px;height: 45px;border: 1px solid #ff5d5d;">
              </ion-avatar>
            </div>
            <div>
              <h2>{{com.commenter_name}}</h2>
              <p style="font-size: 12px; margin-bottom: 8px;">{{com.comment_time}}</p>
            </div>
          </div>
          <h2 style="white-space: initial;font-size: 14px;margin-top:0.2rem;padding-left:0.2rem">{{com.review_content}}</h2>
        </ion-item>
      </ion-list>
    </div>
  </div>
</ion-content>

<div class="model" *ngIf="show">
  <div>
    <div class="close" (click)="show=!show">
      <img src="assets/img/ios/guanbi-@2x.png" alt="">
      <div></div>
    </div>
    <ul>
      <li *ngFor="let select of selects;let i = index">
        <span>{{select.day}}天</span>
        <span style="color:red">￥{{select.price}}</span>

        <img *ngIf="!(selectItem == select)" (click)="selectItem = select" src="assets/img/serviceno.png" alt="">
        <img *ngIf="selectItem == select" (click)="selectItem={}" src="assets/img/service.png" alt="">
      </li>

      <li style="border:none;font-size: 1.1rem;justify-content: center;color:rgb(193,193,193);margin-bottom: 1rem;">
        美店付款点赞后，此款式将进入店铺成为服务款式
      </li>
    </ul>
    <div class="btn" (click)="submit()">
      确认购买
    </div>
  </div>
</div>